<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">我的优惠券</div>
		<router-link :to="{name:'coupon-center'}" right>领券中心 ></router-link>
	</div>

	<Tabs size="small" mgt2 @on-click="handleTabClick">
        <TabPane label="未使用" name="unused">
			<Row :gutter="10">
				<Col v-for="(item, index) in items" v-if="item.status==0&&!item.isOverdue" :key="index" :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 8, offset: 0 }">
					<coupon :value="item" long></coupon>
				</Col>
			</Row>
		</TabPane>
        <TabPane label="已使用" name="used">
			<Row :gutter="10">
				<Col v-for="(item, index) in items" v-if="item.status!=0" :key="index" :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 8, offset: 0 }">
					<coupon :value="item" long></coupon>
				</Col>
			</Row>
		</TabPane>
        <TabPane label="已过期" name="overdue">
			<Row :gutter="10">
				<Col v-for="(item, index) in items" v-if="item.status==0&&item.isOverdue" :key="index" :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 8, offset: 0 }">
					<coupon :value="item" long></coupon>
				</Col>
			</Row>
		</TabPane>
    </Tabs>

    <AutoPage :value="page" :auto="false" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import coupon from '../../components/common/coupon.vue'
import AutoPage from '@common/components/AutoPage';

@Component({
    components: { coupon, AutoPage }
})
export default class MemberCoupon extends AbpBase{
	get page() {
		return this.$store.state.self.couponPage;
	}
	get items() {
		return this.page.items;
	}
	handleTabClick(name) {
		this.page.items = [];
		this.page.action_data.tag = name;
		this.page.getData();
	}
	created() {
		this.handleTabClick('unused');
	}
}
</script>
